<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-button type="primary" :icon="CirclePlus" @click="onEdit(0)">添加</el-button>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-date-picker v-model="form.search" type="month" value-format="YYYY-MM" placeholder="请选择月份" />
                <el-button type="primary" class="ml10" :icon="Search" @click="onSearch">搜索</el-button>
                <el-button type="primary" class="ml10" :icon="RefreshRight" @click="onSearch('Refresh')" />
            </el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column prop="name" label="供应商/分包班组" />
            <el-table-column prop="unit" label="负责人。" />
            <el-table-column prop="price" label="联系电话"  />
            <el-table-column label="供应内容/分包内容">
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.name}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="银行行号">
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.bank_no}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="工资卡卡号/银行帐号">
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.bank_number}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="工资卡开户银行">
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.bank}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="支付单位">
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.pay_company}}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="累计已付金额" />
            <el-table-column prop="remarks" label="已付比例合同金额" />
            <el-table-column prop="remarks" label="本月付款底" />
            <el-table-column prop="remarks" label="比例" />
            <el-table-column prop="remarks" label="个人签字" />
            <el-table-column prop="remarks" label="班组/供应商签字" />
            <el-table-column prop="remarks" label="备注" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { CirclePlus, RefreshRight, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import http from '../../../util/request';
import router from '../../../router';
const indexMethod = (index: number) => {
  return index+= 1
}
const form = ref<any>({search:'',source:'MaterialPay,LaborContract,LaborPay',model:'Reimburse',status:'approved',page:0,current:0,total:10,limit:20,loading:false,parentBorder:true})
const tableData = ref<any[]>([])

const onGetData = () => {
    
    form.value.loading = true
    http.post('/approve/sources',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onSearch = (type = '') => {
    if(type == 'Refresh'){
        form.value.search = ''
        onGetData()
        return
    }
    if(!form.value.search){
        ElMessage.error('请输入搜索内容')
    }
    form.value.page = 1
    onGetData()
}


const onEdit = (id: number) => {
    router.push({ name: 'financeMonthEndPayEdit',params: { id: id }})
}
onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>